<template>
    <div class="SelectLabel" ref="SelectLabel">
        <div class="background">
            <div class="title">{{title}}</div>
            <div class="img">
                <img :src="`/fourBlock/${imgUrl}.jpg`" alt="">
            </div>
            <div class="passage">{{passage}}</div>
        </div>
    </div>
</template>

<script>
import VanillaTilt from 'vanilla-tilt'
    export default {
        name:'SelectLabel',
        mounted() {
            VanillaTilt.init(this.$refs.SelectLabel,{
                max:15,
                speed:400,
            })
        },
        props:['title','imgUrl','passage']
    }
</script>

<style lang="less" scoped>
    .SelectLabel{
        height: 40vh;
        width: 15vw;
        background-color: rgba(255, 255, 255, 0.2);
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 1em;
        // box-shadow: 20px 20px 50px rgba(255, 255, 255, 0.1);
        border-top:1px solid rgba(255, 255, 255, 0.5) ;
        border-left:1px solid rgba(255, 255, 255, 0.5) ;
        backdrop-filter: blur(5px);
        overflow:hidden ;
        .background{
            transform: translateY(40vh);
            transition: transform 0.5s ease-out;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            user-select: none;
            .title{
                font-size: 80px;
                transform: translate(20px,10px);
                letter-spacing:-20px;
                color: rgba(255, 255, 255, 0.5);
            }
            .img{
                width:10vw;
                height: 15vh;
                &>img{
                    width: 100%;
                    height: 100%;
                }
                margin-top:10px ;
            }
            .passage{
                width: 100%;
                color: white;
                font-size:25px ;
                text-align: center;
                margin-top:10px ;
            }
        }
        &:hover .background{
            transform: translateY(0vh);
        }
    }

</style>